<template>
    <div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div v-if="$hasPer('MeetEmergencies:add')" class="search-s page-public-s" style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item >
                            <!-- <el-button @click='searchClick' icon="ele-Search" type="primary"> 查询 </el-button>
                            <el-button  @click="resetClick" icon="ele-Refresh"> 重置 </el-button> -->
                            <el-button @click="nodeClick({},0)" icon="ele-Plus" type="primary"> 新增主记录数据 </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            
            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100 overflow-set">
                                    <el-table
                                            :data="treeData"
                                            style="width: 100%; margin-bottom: 20px"
                                            row-key="id"
                                            border
                                            default-expand-all
                                        >
                                            <el-table-column min-width="200" prop="v_Name" label="名称" />
                                            <el-table-column min-width="100" prop="address" label="是否需要文档">
                                                <template #default="scope">
                                                    <span style="color: #67C23A;" v-if="scope.row.isNeedFile">需要</span>
                                                    <span style="color: #E6A23C;" v-else>不需要</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column v-if="$hasPer('MeetEmergencies:addChildNode') && $hasPer('MeetEmergencies:edit') && $hasPer('MeetEmergencies:del') && $hasPer('MeetEmergencies:uploadFile') && $hasPer('MeetEmergencies:finishUpload')" min-width="180" label="操作" align="center" fixed="right">
                                                <template #default="scope">
                                                    <el-button v-if="$hasPer('MeetEmergencies:addChildNode')" @click="nodeClick(scope.row,1)" class="icon-e" icon="ele-Plus" size="small" text type="success">新增子级</el-button>
                                                    <el-button v-if="$hasPer('MeetEmergencies:edit')" @click="nodeClick(scope.row,2)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                                    <el-button v-if="$hasPer('MeetEmergencies:del')" @click="deleteHandle(scope.row.id)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                                    <el-button v-if="scope.row.isNeedFile && scope.row.isMissingFile && $hasPer('MeetEmergencies:uploadFile')" @click="uploadHandle(scope.row)" class="icon-e" icon="ele-Upload" size="small" text type="warning">上传文件</el-button>
                                                    <el-button v-if="scope.row.isNeedFile && !scope.row.isMissingFile && $hasPer('MeetEmergencies:finishUpload')" @click="uploadHandle(scope.row)" class="icon-e" icon="ele-View" size="small" text type="warning">文件已上传</el-button>
                                                </template>
                                            </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <!-- 新增/编辑 -->
        <AddEditMeetEmergencies
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
        <!-- 文件上传 -->
        <uploadFile
            :isAccept="isAccept"
            :fileInfo="fileInfo"
            :isUseDialog="fileDialog"
            @cancelFileClick="cancelFileClick"
            @controlFileClick="controlFileClick"
        ></uploadFile>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw } from 'vue';
import { SMSDRAccidentTrees , SMSDRAccidentDelete } from '/@/api/centerControl/sms';
import AddEditMeetEmergencies from '../component/sms/add-edit-MeetEmergencies.vue';
import { ElMessageBox , ElMessage } from 'element-plus';
import uploadFile from '../component/uploadFile.vue';
// import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

export default defineComponent( {
    name: 'MeetEmergencies',
    components: {
        AddEditMeetEmergencies,
        uploadFile,
    },
    setup(props){
        const isUseDialog = ref(); // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref();
        const treeData = ref();
        const isAccept = ref();
        const fileInfo = ref();
        const fileDialog = ref(false);

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:any, num: number) => {
            switch(num){
                case 0:
                    // 新增顶级
                    val.presentStatus = 'top';
                    repairInfo.value = JSON.stringify(val);
                    isUseDialog.value = true;
                    break;
                case 1:
                    // 新增子级
                    val.presentStatus = 'son';
                    repairInfo.value = JSON.stringify(val);
                    isUseDialog.value = true;
                    break;
                case 2:
                    // 编辑
                    val.presentStatus = 'edit';
                    repairInfo.value = JSON.stringify(val);
                    isUseDialog.value = true;
                    break;
            }
            isUseDialog.value = true
        };

        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (val: String | Number) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val}
                try {
                    let res:any = await SMSDRAccidentDelete(param);
                    if(res.success){
                        getTreeData();
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        };

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false;
        };

        /*** controlUseClick 提交事件 */
        const controlUseClick = () => {
            isUseDialog.value = false;
            getTreeData();
        };

        /*** getTreeData 或去树行数据 */
        const getTreeData = async() => {
            let param = {};
            let res: any = await SMSDRAccidentTrees(param);
            if(res.success) treeData.value = res.data;
        };

        /*** uploadHandle 文件上传点击事件 */
        const uploadHandle = (val: any) => {
            // 文件上传
            val.sourceType = 10;
            val.sourceId = val.l_FileId;
            val.titleCon = '事故应急管理文件上传';
            val.isAccept = '';
            fileInfo.value = JSON.stringify(val);
            fileDialog.value = true;
        };

        /*** cancelFileClick 文件上传取消事件 */
        const cancelFileClick = () => {
            fileDialog.value = false;
        };

        /*** controlFileClick 文件上传提交事件 */
        const controlFileClick = () => {
            fileDialog.value = false;
            getTreeData();
        };

        onMounted(() => {
            getTreeData();
        });

        return {
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            nodeClick,
            repairInfo,
            deleteHandle,
            treeData,
            uploadHandle,
            isAccept,
            fileInfo,
            fileDialog,
            cancelFileClick,
            controlFileClick,
        }
    },
} )
</script>
<style lang="scss"> @import '../style/public.scss'; </style>
<style scoped lang="scss">
#friend-merchant-manage {
    .box-f{
        :deep(.el-form-item__label){
            padding: 0;
        }
    }
    :deep(.el-card__body) {
        height: 100%;
    }
    :deep(.el-card){
        border: none !important;
    }
    .upload-demo{
        margin-left: 12px;
        margin-top: 2px;
    }
    ul {

        list-style: none;

        li {
            cursor: pointer;

            &:hover {
                color: red;
            }
        }
    }
    .icon-e{
        :deep(.el-icon){
            margin-right: 0px!important;
        }
    }
    .overflow-set{
        overflow-y: auto;
    }
}
</style>